<template>
    <div class="recharge">
        <div class="card">
            <nut-ecard v-model="money" placeholder="请输入充值金额" @input-change="inputChange" @change="change"
                @change-step="changeStep" :data-list="list"></nut-ecard>
        </div>
        <div class="img"><img src="https://cxj.szzkba.cn/up/uploadPath/icon/pPRw3o4.png" mode="aspectFit" alt=""></div>
        <nut-button block type="info" :loading="loading" color="#8DCF00" @click="recharge">充值</nut-button>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter, useReachBottom } from '@tarojs/taro';
import { } from '@nutui/icons-vue-taro';
import { reactive, toRefs, ref, onMounted } from 'vue';
import { payRecharge } from '../../../../api/index'
export default {
    components: {

    },
    setup() {
        const state = reactive({
            list: [
                {
                    price: 500
                },
                {
                    price: 1000
                },
                {
                    price: 3000
                },
                {
                    price: 5000
                }
            ],
            loading: false
        });
        onMounted(() => {

        });
        const money = ref(0);
        const inputChange = (val) => {
            money.value = val;
        };
        const change = (item) => {
            money.value = item.price;
        };
        const changeStep = (num, price) => {
            const val = price * num;
            money.value = val;
        };
        const recharge = () => {
            state.loading = true
            Taro.getStorage({
                key: 'user',
                success: function (res) {
                    //console.log(res.data)
                    payRecharge({ openid: res.data.passwordMd5, title: '充值', price: money.value }).then(response => {
                        if (response.resultCode == 200) {
                            state.loading = false
                            Taro.requestPayment({
                                timeStamp: response.data.timeStamp,
                                nonceStr: response.data.nonceStr,
                                package: response.data.package,
                                signType: response.data.signType,
                                paySign: response.data.paySign,
                                success: function (res) {
                                    //console.log(res)
                                },
                                fail: function (res) {
                                    //console.log(res)
                                }
                            })
                        }
                    })
                }
            })
        }
        return {
            ...toRefs(state),
            inputChange,
            change,
            money,
            changeStep,
            recharge
        }
    }
};
</script>


<style lang="scss">
.recharge {
    .card {
        width: 92%;
        margin: 20rpx auto 0;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 0 10px 10px #F9F9F9;
        padding: 30px;
        box-sizing: border-box;
    }

    .img {
        width: 92%;
        margin: 20rpx auto 0;

        img {
            width: 100%;
            height: 382rpx;
        }
    }

    .nut-button {
        width: 90%;
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
    }
}
</style>